package myJs.analysis

import myJs.MainCp
import myJs.assets.assetsCss
import myJs.cps._
import myJs.myPkg.tabs._
import slinky.core.FunctionalComponent
import slinky.core.annotations.react
import slinky.core.facade.Hooks._
import slinky.web.html._

/**
 * Created by yz on 21/1/2022
 */
@react object Cp {

  type Props = Unit
  val curPage = Analysis

  val component = FunctionalComponent[Props] { props =>

    val initTab = List("dependency", "survival", "comparison")(0)
    val (tab, setTab) = useState(initTab)

    object FTool {

      def tabChange = (v: String) => {
        setTab(v)
      }

    }

    MainCp(title = curPage.titleStr)(

      div(className := "panel panel-default",
        div(className := "panel-heading",
          h3(className := "panel-title",
            s"${curPage.titleStr}"
          )
        ),
        div(className := "panel-body",
          Tabs(id = "tab", activeKey = tab, onSelect = FTool.tabChange, transition = false)(
            Tab(eventKey = "dependency", title = "Dependency")(
              div(style := Style(marginTop = "20px"),
                DependencyCp()
              )
            ),
            Tab(eventKey = "survival", title = "Survival")(
              div(style := Style(marginTop = "20px"),
                SurvivalCp()
              ),
            ),
            Tab(eventKey = "comparison", title = "Comparison")(
              div(style := Style(marginTop = "20px"),
                ComparisonCp()
              )
            ),
          )
        )
      )


    )


  }

  object STool {


  }

}
